// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
  console.log('页面加载完成');

  // 检查登录状态
  if (!checkLoginStatus()) {
    return;
  }

  // 初始化layui组件
  layui.use(['element', 'layer', 'form'], function () {
    var element = layui.element;
    var layer = layui.layer;
    var form = layui.form;

    // 重新渲染表单
    form.render();
  });

  // 显示欢迎页面，隐藏其他页面
  showWelcomePage();
});

// 显示欢迎页面
function showWelcomePage() {
  // 显示欢迎页面，隐藏其他内容
  document.getElementById('welcomePage').style.display = 'block';
  document.getElementById('eventManagement').style.display = 'none';
  document.getElementById('categoryManagement').style.display = 'none';

  // 更新欢迎信息
  const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
  const usernameElement = document.getElementById('username');
  if (usernameElement && userInfo) {
    usernameElement.textContent = userInfo.name || userInfo.username;
  }
}

// 点击我按钮事件
document.getElementById('popupBtn')?.addEventListener('click', function () {
  layer.msg('欢迎使用简易记事本系统！');
});

// 更新用户信息显示
function updateUserInfo(userInfo) {
  // 更新用户名显示
  const usernameElement = document.getElementById('username');
  if (usernameElement) {
    usernameElement.textContent = userInfo.name || userInfo.username;
  }

  // 更新头像旁边的用户信息
  const userInfoElement = document.querySelector('.layui-nav-img');
  if (userInfoElement) {
    userInfoElement.setAttribute('title', userInfo.username);
  }

  console.log('用户信息已更新到页面');
}

// 检查登录状态
function checkLoginStatus() {
  console.log('开始检查登录状态');

  const username = sessionStorage.getItem('username');
  const userInfoStr = sessionStorage.getItem('userInfo');

  console.log('从 sessionStorage 获取的数据:', {
    username: username,
    userInfoStr: userInfoStr
  });

  if (!username || !userInfoStr) {
    console.log('未找到用户信息');
    layer.msg('请先登录', {
      icon: 2,
      time: 1500
    }, function () {
      window.location.href = 'login.html';
    });
    return false;
  }

  try {
    const userInfo = JSON.parse(userInfoStr);
    console.log('解析后的用户信息:', userInfo);

    if (!userInfo.username) {
      throw new Error('用户信息不完整');
    }

    // 更新页面上的用户信息显示
    updateUserInfo(userInfo);
    return true;
  } catch (error) {
    console.error('处理用户信息时出错:', error);
    // 清除无效的会话数据
    sessionStorage.removeItem('username');
    sessionStorage.removeItem('userInfo');

    layer.msg('登录信息无效，请重新登录', {
      icon: 2,
      time: 1500
    }, function () {
      window.location.href = 'login.html';
    });
    return false;
  }
}

// 退出登录
function logout() {
  // 清除会话存储的用户信息
  sessionStorage.removeItem('username');
  sessionStorage.removeItem('userInfo');

  layer.msg('已退出登录', {
    icon: 1,
    time: 1000
  }, function () {
    window.location.href = 'login.html';
  });
}

// 显示分类列表
window.showCategoryList = async function () {
  // 隐藏欢迎页面
  document.getElementById('welcomePage').style.display = 'none';

  try {
    console.log('显示分类列表');
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));

    // 调用API获取分类列表
    const result = await categoryApi.getAll(userInfo.username);
    console.log('获取到的分类数据:', result); // 添加调试日志

    if (result.code === 0 && result.data) {
      // 显示分类管理区域
      document.getElementById('categoryManagement').style.display = 'block';
      document.getElementById('eventManagement').style.display = 'none';
      document.getElementById('welcomePage').style.display = 'none';

      // 更新分类列表显示 - 修改字段名以匹配数据库
      const tableBody = document.getElementById('categoryTableBody');
      tableBody.innerHTML = result.data.map(category => {
        console.log('处理分类数据:', category); // 添加调试日志
        return `
          <tr>
            <td>${category.categoryName || ''}</td>
            <td>${category.description || ''}</td>
            <td>
              <button onclick="editCategory(${category.categoryId})" class="layui-btn layui-btn-xs">编辑</button>
              <button onclick="deleteCategory(${category.categoryId})" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
            </td>
          </tr>
        `;
      }).join('');
    } else {
      layer.msg(result.message || '获取分类列表失败');
    }
  } catch (error) {
    console.error('获取分类列表失败:', error);
    layer.msg('获取分类列表失败');
  }
};

// 删除分类
window.deleteCategory = async function (categoryId) {
  try {
    layer.confirm('确定要删除这个分类吗？', {
      btn: ['确定', '取消']
    }, async function () {
      const result = await categoryApi.delete(categoryId);
      if (result.code === 0) {
        layer.msg('删除成功');
        showCategoryList(); // 刷新列表
      } else {
        layer.msg(result.message || '删除失败');
      }
    });
  } catch (error) {
    console.error('删除分类失败:', error);
    layer.msg('删除分类失败');
  }
};

// 添加分类
window.addCategory = async function () {
  const categoryName = document.getElementById('categoryName').value.trim();
  const description = document.getElementById('categoryDescription').value.trim(); // 添加描述字段

  // 表单验证
  if (!categoryName) {
    layer.msg('请输入分类名称');
    return;
  }

  try {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    // 构造与后端实体类匹配的数据
    const data = {
      username: userInfo.username, // 添加用户名字段
      categoryName: categoryName,  // 修改为与后端一致的字段名
      userId: userInfo.id,        // 添加用户ID字段
      description: description    // 添加描述字段
    };

    console.log('发送的分类数据:', data); // 调试日志

    const result = await categoryApi.add(data);
    if (result.code === 0) {
      layer.msg('添加成功');
      // 清空表单
      document.getElementById('categoryName').value = '';
      document.getElementById('categoryDescription').value = '';
      showCategoryList(); // 刷新列表
    } else {
      layer.msg(result.message || '添加失败');
    }
  } catch (error) {
    console.error('添加分类失败:', error);
    layer.msg('添加分类失败');
  }
};

// 编辑分类
window.editCategory = async function (categoryId) {
  try {
    // 显示编辑表单，隐藏添加表单
    document.getElementById('editCategoryForm').style.display = 'block';
    document.getElementById('addCategoryForm').style.display = 'none';

    // 获取分类详情
    const result = await categoryApi.get(categoryId);
    if (result.code === 0 && result.data) {
      const category = result.data;

      // 填充表单数据
      document.getElementById('editCategoryId').value = category.categoryId;
      document.getElementById('editCategoryName').value = category.categoryName;
      document.getElementById('editCategoryDescription').value = category.description;

      // 重新渲染表单
      layui.form.render();
    } else {
      layer.msg('获取分类信息失败');
    }
  } catch (error) {
    console.error('编辑分类失败:', error);
    layer.msg('编辑分类失败');
  }
};

// 提交编辑分类
window.submitEditCategory = async function () {
  try {
    const data = {
      categoryId: document.getElementById('editCategoryId').value,
      categoryName: document.getElementById('editCategoryName').value,
      description: document.getElementById('editCategoryDescription').value,
      userId: JSON.parse(sessionStorage.getItem('userInfo')).id
    };

    console.log('提交更新的分类数据:', data);

    const result = await categoryApi.update(data);
    if (result.code === 0) {
      layer.msg('更新成功');
      cancelEdit(); // 隐藏编辑表单
      await showCategoryList(); // 刷新列表
    } else {
      layer.msg(result.message || '更新失败');
    }
  } catch (error) {
    console.error('更新分类失败:', error);
    layer.msg('更新分类失败');
  }
};

// 取消编辑
window.cancelEdit = function () {
  document.getElementById('editCategoryForm').style.display = 'none';
  document.getElementById('addCategoryForm').style.display = 'block';
  // 清空编辑表单
  document.getElementById('editCategoryId').value = '';
  document.getElementById('editCategoryName').value = '';
  document.getElementById('editCategoryDescription').value = '';
};

// 显示事件列表
window.showEventList = async function () {
  try {
    console.log('显示事件列表');
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));

    // 调用API获取事件列表
    const result = await eventApi.getListByUser(userInfo.id);
    console.log('获取到的事件数据:', result);

    if (result.code === 0 && result.data) {
      // 显示事件管理区域
      document.getElementById('eventManagement').style.display = 'block';
      document.getElementById('categoryManagement').style.display = 'none';
      document.getElementById('welcomePage').style.display = 'none';
      document.getElementById('addEventForm').style.display = 'none';
      document.getElementById('eventListArea').style.display = 'block';

      // 更新事件列表显示
      const tableBody = document.getElementById('eventTableBody');
      tableBody.innerHTML = result.data.map(event => {
        // 安全地获取数据，避免空值错误
        const safeEvent = {
          title: event.title || '',
          categoryName: event.categoryName || '',
          level: event.level || '',
          startDate: event.startDate || null,
          endDate: event.endDate || null,
          content: event.content || '',
          status: event.status || '',
          eventId: event.eventId
        };

        return `
          <tr>
            <td>${safeEvent.title}</td>
            <td>${safeEvent.categoryName}</td>
            <td class="event-${safeEvent.level.toLowerCase()}">${safeEvent.level}</td>
            <td>${formatDateTime(safeEvent.startDate)}</td>
            <td>${formatDateTime(safeEvent.endDate)}</td>
            <td>${safeEvent.content}</td>
            <td>${safeEvent.status}</td>
            <td>
              <button onclick="editEvent(${safeEvent.eventId})" class="layui-btn layui-btn-xs">编辑</button>
              <button onclick="deleteEvent(${safeEvent.eventId})" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
              ${safeEvent.status !== '已完成' ?
            `<button onclick="updateEventStatus(${safeEvent.eventId}, '已完成')" class="layui-btn layui-btn-xs layui-btn-normal">标记完成</button>` : ''}
              ${safeEvent.status !== '作废' ?
            `<button onclick="updateEventStatusToVoid(${safeEvent.eventId})" class="layui-btn layui-btn-xs layui-btn-warm">标记作废</button>` : ''}
            </td>
          </tr>
        `;
      }).join('');
    } else {
      layer.msg(result.message || '获取事件列表失败');
    }
  } catch (error) {
    console.error('获取事件列表失败:', error);
    layer.msg('获取事件列表失败，请检查网络连接');
  }
};

// 更新事件状态
window.updateEventStatus = async function (eventId, status) {
  try {
    const result = await eventApi.updateStatus(eventId, status);
    if (result.code === 0) {
      layer.msg('状态更新成功');
      // 立即刷新列表
      await showEventList();
    } else {
      layer.msg(result.message || '状态更新失败');
    }
  } catch (error) {
    console.error('更新状态失败:', error);
    layer.msg('更新状态失败');
  }
};

// 标记事件为作废
window.updateEventStatusToVoid = async function (eventId) {
  try {
    const result = await eventApi.updateStatusToVoid(eventId);
    if (result.code === 0) {
      layer.msg('已标记为作废');
      // 立即刷新列表
      await showEventList();
    } else {
      layer.msg(result.message || '标记作废失败');
    }
  } catch (error) {
    console.error('标记作废失败:', error);
    layer.msg('标记作废失败');
  }
};

// 退出登录
window.logout = async function () {
  try {
    const result = await userApi.logout();
    if (result.code === 0) {
      // 清除会话存储
      sessionStorage.removeItem('username');
      sessionStorage.removeItem('userInfo');

      layer.msg('退出成功', {
        icon: 1,
        time: 1000
      }, function () {
        window.location.href = 'login.html';
      });
    } else {
      layer.msg(result.message || '退出失败');
    }
  } catch (error) {
    console.error('退出失败:', error);
    layer.msg('退出失败');
  }
};

// 搜索事件
window.searchEvents = async function () {
  try {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    if (!userInfo || !userInfo.id) {
      layer.msg('用户信息获取失败，请重新登录');
      return;
    }

    const searchData = {
      userId: userInfo.id, // 必须传递userId
      title: document.getElementById('searchTitle').value,
      categoryId: document.getElementById('searchCategory').value,
      level: document.getElementById('searchLevel').value,
      status: document.getElementById('searchStatus').value
    };

    console.log('搜索参数:', searchData);

    const result = await eventApi.search(searchData);
    if (result.code === 0) {
      if (Array.isArray(result.data)) {
        renderEventList(result.data);
      } else {
        console.error('返回的数据格式不正确:', result);
        layer.msg('搜索结果格式不正确');
      }
    } else {
      layer.msg(result.message || '搜索失败');
    }
  } catch (error) {
    console.error('搜索失败:', error);
    layer.msg('搜索失败，请稍后重试');
  }
};

// 渲染事件列表
function renderEventList(events) {
  // 按截止日期降序排序
  events.sort((a, b) => new Date(b.endDate) - new Date(a.endDate));

  const tableBody = document.getElementById('eventTableBody');
  tableBody.innerHTML = events.map(event => {
    const levelClass = `event-${event.level.toLowerCase()}`;
    return `
      <tr class="${levelClass}">
        <td>${event.title || ''}</td>
        <td>${event.categoryName || ''}</td>
        <td>${event.level || ''}</td>
        <td>${formatDateTime(event.startDate)}</td>
        <td>${formatDateTime(event.endDate)}</td>
        <td>${event.content || ''}</td>
        <td>${event.status || ''}</td>
        <td>
          <button onclick="editEvent(${event.eventId})" class="layui-btn layui-btn-xs">编辑</button>
          <button onclick="deleteEvent(${event.eventId})" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
          ${event.status !== '已完成' ?
        `<button onclick="updateEventStatus(${event.eventId}, '已完成')" class="layui-btn layui-btn-xs layui-btn-normal">标记完成</button>` : ''}
          ${event.status !== '作废' ?
        `<button onclick="updateEventStatusToVoid(${event.eventId})" class="layui-btn layui-btn-xs layui-btn-warm">标记作废</button>` : ''}
        </td>
      </tr>
    `;
  }).join('');
}

// 显示添加事件表单
window.showAddEvent = async function () {
  try {
    console.log('显示添加事件表单');
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));

    // 获取分类列表用于下拉选择
    const result = await categoryApi.getAll(userInfo.username);
    console.log('获取到的分类数据:', result); // 添加调试日志

    if (result.code === 0) {
      // 显示添加事件表单
      document.getElementById('eventManagement').style.display = 'block';
      document.getElementById('categoryManagement').style.display = 'none';
      document.getElementById('welcomePage').style.display = 'none';
      document.getElementById('eventListArea').style.display = 'none';
      document.getElementById('addEventForm').style.display = 'block';

      // 更新分类下拉列表
      const categorySelect = document.getElementById('eventCategory');
      if (categorySelect && result.data) {
        categorySelect.innerHTML = result.data.map(category =>
          `<option value="${category.categoryId}">${category.categoryName}</option>`
        ).join('');

        // 重新渲染表单
        layui.form.render('select');
      }
    } else {
      layer.msg(result.message || '获取分类列表失败');
    }
  } catch (error) {
    console.error('准备添加事件表单失败:', error);
    layer.msg('准备添加事件表单失败');
  }
};

// 添加提交事件函数
window.submitEvent = async function () {
  try {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    const eventData = {
      categoryId: document.getElementById('eventCategory').value,
      userId: userInfo.id,
      title: document.getElementById('eventTitle').value,
      startDate: document.getElementById('startDate').value,
      endDate: document.getElementById('endDate').value,
      content: document.getElementById('eventContent').value,
      level: document.getElementById('eventLevel').value,
      status: document.getElementById('eventStatus').value,
      username: userInfo.username // 添加username字段
    };

    console.log('提交的事件数据:', eventData); // 添加调试日志

    const result = await eventApi.add(eventData);
    if (result.code === 0) {
      layer.msg('添加成功');
      showEventList(); // 刷新列表
    } else {
      layer.msg(result.message || '添加失败');
    }
  } catch (error) {
    console.error('添加事件失败:', error);
    layer.msg('添加事件失败');
  }
};

// 取消添加事件
window.cancelAddEvent = function () {
  document.getElementById('addEventForm').style.display = 'none';
  document.getElementById('eventListArea').style.display = 'block';
};

// 编辑事件
window.editEvent = async function (eventId) {
  try {
    // 首先获取事件详情
    const result = await eventApi.get(eventId);
    console.log('获取到的事件详情:', result);

    if (result.code === 0 && result.data) {
      const event = result.data;

      // 获取分类列表用于下拉选择
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      const categoryResult = await categoryApi.getAll(userInfo.username);

      // 显示编辑表单，隐藏列表
      document.getElementById('editEventForm').style.display = 'block';
      document.getElementById('eventListArea').style.display = 'none';

      // 更新分类下拉列表
      const categorySelect = document.getElementById('editEventCategory');
      if (categorySelect && categoryResult.data) {
        categorySelect.innerHTML = categoryResult.data.map(category =>
          `<option value="${category.categoryId}">${category.categoryName}</option>`
        ).join('');
      }

      // 格式化日期并回填表单数据
      const startDate = event.startDate ? formatDate(new Date(event.startDate)) : '';
      const endDate = event.endDate ? formatDate(new Date(event.endDate)) : '';

      // 回填表单数据
      document.getElementById('editEventId').value = event.eventId;
      document.getElementById('editEventCategory').value = event.categoryId;
      document.getElementById('editEventTitle').value = event.title;
      document.getElementById('editStartDate').value = startDate;
      document.getElementById('editEndDate').value = endDate;
      document.getElementById('editEventContent').value = event.content || '';
      document.getElementById('editEventLevel').value = event.level;
      document.getElementById('editEventStatus').value = event.status;

      // 重新渲染表单
      layui.form.render();
    } else {
      layer.msg('获取事件信息失败');
    }
  } catch (error) {
    console.error('编辑事件失败:', error);
    layer.msg('编辑事件失败');
  }
};

// 提交更新事件
window.submitEditEvent = async function () {
  try {
    // 收集表单数据
    const eventData = {
      eventId: document.getElementById('editEventId').value,
      categoryId: document.getElementById('editEventCategory').value,
      title: document.getElementById('editEventTitle').value,
      startDate: document.getElementById('editStartDate').value,
      endDate: document.getElementById('editEndDate').value,
      content: document.getElementById('editEventContent').value,
      level: document.getElementById('editEventLevel').value,
      status: document.getElementById('editEventStatus').value,
      userId: JSON.parse(sessionStorage.getItem('userInfo')).id
    };

    console.log('提交更新的事件数据:', eventData);

    // 表单验证
    if (!eventData.title || !eventData.startDate || !eventData.endDate) {
      layer.msg('请填写必填项');
      return;
    }

    // 调用更新API
    const result = await eventApi.update(eventData);
    if (result.code === 0) {
      layer.msg('更新成功');
      cancelEditEvent(); // 隐藏编辑表单
      await showEventList(); // 刷新列表
    } else {
      layer.msg(result.message || '更新失败');
    }
  } catch (error) {
    console.error('更新事件失败:', error);
    layer.msg('更新事件失败');
  }
};

// 取消编辑
window.cancelEditEvent = function () {
  document.getElementById('editEventForm').style.display = 'none';
  document.getElementById('eventListArea').style.display = 'block';
  // 清空表单
  document.getElementById('editEventForm').reset();
};

// 删除事件
window.deleteEvent = async function (eventId) {
  try {
    layer.confirm('确定要删除这条事件记录吗？', {
      btn: ['确定', '取消']
    }, async function () {
      const result = await eventApi.delete(eventId);
      if (result.code === 0) {
        layer.msg('删除成功');
        await showEventList(); // 刷新列表
      } else {
        layer.msg(result.message || '删除失败');
      }
    });
  } catch (error) {
    console.error('删除事件失败:', error);
    layer.msg('删除事件失败');
  }
};

// 搜索事件
window.searchEvents = async function () {
  try {
    const searchData = {
      title: document.getElementById('searchTitle').value,
      categoryId: document.getElementById('searchCategory').value,
      level: document.getElementById('searchLevel').value,
      status: document.getElementById('searchStatus').value,
      userId: JSON.parse(sessionStorage.getItem('userInfo')).id
    };

    console.log('搜索条件:', searchData);

    const result = await eventApi.search(searchData);
    if (result.code === 0) {
      renderEventList(result.data);
    } else {
      layer.msg(result.message || '搜索失败');
    }
  } catch (error) {
    console.error('搜索失败:', error);
    layer.msg('搜索失败');
  }
};

// 渲染事件列表
function renderEventList(events) {
  // 按截止日期降序排序
  events.sort((a, b) => new Date(b.endDate) - new Date(a.endDate));

  const tableBody = document.getElementById('eventTableBody');
  tableBody.innerHTML = events.map(event => {
    const levelClass = `event-${event.level.toLowerCase()}`;
    return `
      <tr class="${levelClass}">
        <td>${event.title || ''}</td>
        <td>${event.categoryName || ''}</td>
        <td>${event.level || ''}</td>
        <td>${formatDateTime(event.startDate)}</td>
        <td>${formatDateTime(event.endDate)}</td>
        <td>${event.content || ''}</td>
        <td>${event.status || ''}</td>
        <td>
          <button onclick="editEvent(${event.eventId})" class="layui-btn layui-btn-xs">编辑</button>
          <button onclick="deleteEvent(${event.eventId})" class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
          ${event.status !== '已完成' ?
        `<button onclick="updateEventStatus(${event.eventId}, '已完成')" class="layui-btn layui-btn-xs layui-btn-normal">标记完成</button>` : ''}
          ${event.status !== '作废' ?
        `<button onclick="updateEventStatusToVoid(${event.eventId})" class="layui-btn layui-btn-xs layui-btn-warm">标记作废</button>` : ''}
        </td>
      </tr>
    `;
  }).join('');
}
